<template>
    <div>
        <div class="musicList">
            <div class="musicTop">
                <div class="title">发现好歌单</div>
                <div class="more">查看更多</div>
            </div>
            <div class="musicContent">
                <van-swipe :width="150" class="my-swipe" :show-indicators="false" :loop="false">
                    <van-swipe-item v-for="item in state.musicList" :key="item">
                        <router-link :to="{ path: '/itemMusic', query: { id: item.id } }">
                            <img :src="item.picUrl" alt="">
                            <span class="playCount">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-gl-play"></use>
                                </svg>
                                {{ changeCount(item.playCount) }}
                            </span>
                            <span class="name">{{ item.name }}</span>
                        </router-link>
                    </van-swipe-item>
                </van-swipe>
            </div>
        </div>

    </div>
</template>

<script>
import { getMusicList } from '@/request/api/home'
import { onMounted, reactive } from 'vue'
export default {
    name: 'HtmlMusicList',
    // Vue2写法
    // data() {
    //     return {
    //         musicList: []
    //     };
    // },
    // mounted() {
    //     this.getGedan()
    // },
    // methods: {
    //     async getGedan() {
    //         let res = await getMusicList()
    //         console.log(res);
    //         this.musicList = res.data.result
    //     },
    //     changeCount: function (num) {
    //         if (num >= 100000000) {
    //             return (num / 100000000).toFixed(1) + '亿'
    //         } else if (num >= 10000) {
    //             return (num / 10000).toFixed(1) + '万'
    //         }
    //     }
    // },

    // Vue3写法
    setup() {
        const state = reactive({
            musicList: [

            ]
        });
        function changeCount(num) {
            if (num >= 100000000) {
                return (num / 100000000).toFixed(1) + '亿'
            } else if (num >= 10000) {
                return (num / 10000).toFixed(1) + '万'
            }
        }
        onMounted(async () => {
            let res = await getMusicList()
            state.musicList = res.data.result
            console.log(res);
        })
        return { state, changeCount };
    },
};
</script>

<style lang="less" scoped>
.musicList {
    width: 100%;
    height: 5rem;
    padding: 0.2rem;

    .musicTop {
        width: 100%;
        height: 0.6rem;
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.2rem;

        .title {
            font-size: 0.4rem;
            font-weight: 900;
        }

        .more {
            border: 1px solid #ccc;
            text-align: center;
            line-height: 0.6rem;
            padding: 0 0.2rem;
            border-radius: 0.4rem;
        }
    }

    .musicContent {
        width: 100%;
        height: 4.2rem;

        .my-swipe {
            height: 100%;
            position: relative;

            img {
                width: 100%;
                height: 140px;
                display: block;
                padding-left: .2rem;
                border-radius: .4rem;
            }

            .playCount {
                position: absolute;
                top: .1rem;
                right: .1rem;
                color: #fff;

                .icon {
                    width: .28rem;
                    height: .28rem;
                }
            }

            .name {
                display: block;
                padding: .1rem 0 0 .24rem;
            }
        }
    }
}
</style>